<template>
  <div>
    <div class="talent_live_details">
      <div class="tld_live_look">
        <div class="tld_look_title">
          <div class="tld_title_box">
            <div class="tld_line"></div>
            <div class="tld_text">直播概览</div>
          </div>
          <div class="tld_time">
            <RadioGroup v-model="lookTime" :radio_values="['近7天', '30天', '90天']" />
          </div>
        </div>
        <div class="tld_look_content" v-if="!showPageVip">
          <div v-if="!llLoading">
            <div class="tld_content_row">
              <div class="tld_content_item">
                <div class="num">{{ LiveLookData.liveCount }}</div>
                <div class="text">直播场次</div>
              </div>
              <div class="tld_content_item">
                <div class="num">{{ LiveShop == 1 ? LiveLookData.shopLiveCount : "--" }}</div>
                <div class="text">带货直播</div>
              </div>
              <div class="tld_content_item">
                <div class="num">{{ LiveShop == 1 ? LiveLookData.livesales : "--" }}</div>
                <div class="text">直播销售额</div>
              </div>
            </div>
            <div class="tld_content_row">
              <div class="tld_content_item">
                <div class="num">{{ LiveShop == 1 ? LiveLookData.livevolume : "--" }}</div>
                <div class="text">直播销量</div>
              </div>
              <div class="tld_content_item">
                <div class="num" v-if="LiveShop == 1">
                  {{
                  LiveLookData.livePriceMIN == LiveLookData.livePriceMAX
                  ? LiveLookData.livePriceMAX
                  : LiveLookData.livePriceMIN +
                  "-" +
                  LiveLookData.livePriceMAX
                  }}
                </div>
                <div class="num" v-else>--</div>
                <div class="text">商品价格区间(元)</div>
              </div>
              <div class="tld_content_item">
                <div class="num">{{ LiveLookData.avgOnlinePeople }}</div>
                <div class="text">平均在线人数</div>
              </div>
            </div>
            <div class="tld_content_row">
              <div class="tld_content_item">
                <div class="num">{{ LiveLookData.peoplePeak }}</div>
                <div class="text">观看人数峰值</div>
              </div>
              <div class="tld_content_item">
                <div class="num" v-html="initTime(LiveLookData.timeDifferenceTotal)">
                  <!-- {{
                  LiveLookData.timeDifferenceTotal
                  ? LiveLookData.timeDifferenceTotal
                  : "--" }}-->
                </div>
                <div class="text">总直播时长</div>
              </div>
              <div class="tld_content_item">
                <div class="num" v-html="initTime(LiveLookData.timeDifferenceAverage)"></div>
                <div class="text">场均直播时长</div>
              </div>
            </div>
          </div>
          <van-loading
            style="margin: 2.5rem 0rem"
            class="loading"
            v-if="llLoading"
            type="spinner"
            :vertical="true"
          />
        </div>
        <noPower :minLeve="$store.state.userRoot[5][123].ownerMinLevel" v-if="showPageVip" />
      </div>
      <div class="tld_live_data">
        <div class="tld_look_title">
          <div class="tld_title_box">
            <div class="tld_line"></div>
            <div class="tld_text">直播数据</div>
          </div>
        </div>
        <div class="tld_data_title">
          <div
            :class="{ tld_active: isLive == 1 }"
            class="tld_title_item"
            @click="isLive = 1"
          >直播时长分布</div>
          <div
            :class="{ tld_active: isLive == 2 }"
            class="tld_title_item"
            @click="isLive = 2"
          >开播时间统计</div>
          <div
            :class="{ tld_active: isLive == 3 }"
            class="tld_title_item"
            @click="isLive = 3"
          >人均看播时长</div>
        </div>
        <template v-if="!showPageVip">
          <div class="tld_time_lenght" v-if="isLive == 1">
            <BigPie
              v-if="liveTiemData.length != 0 && !ltLoading"
              :valueData="liveTiemData"
              Etitle="直播时长分布"
            />
            <van-loading
              style="padding-top: 2.5rem; box-sizing: border-box"
              class="loading"
              v-if="ltLoading"
              type="spinner"
              :vertical="true"
            />
            <div class="tld_no_data" v-if="!liveTiemData.length && !ltLoading">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </div>
          <div class="tld_time_census" v-if="isLive == 2">
            <div class="switch">
              <div
                class="switch-btn"
                :class="{ native: changeBoard }"
                @click.stop="changeList(true)"
              >日</div>
              <div
                class="switch-btn"
                :class="{ native: !changeBoard }"
                @click.stop="changeList(false)"
              >周</div>
            </div>
            <KChart
              v-if="startLiveData.x.length != 0 && !slLoading"
              :xData="startLiveData.x"
              :series1="startLiveData.y"
              name1="开播时间统计"
              title="场次"
            />
            <van-loading
              style="padding-top: 2.5rem; box-sizing: border-box"
              class="loading"
              v-if="slLoading"
              type="spinner"
              :vertical="true"
            />
            <div class="tld_no_data" v-if="!startLiveData.x.length && !slLoading">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </div>
          <div class="tld_time_lenght" v-if="isLive == 3">
            <KChart
              v-if="peopLeLookData.x.length != 0 && !plLoading"
              :xData="peopLeLookData.x"
              :series1="peopLeLookData.y"
              name1="人均看播时长 "
              title="单位:秒"
            />
            <van-loading
              style="padding-top: 2.5rem; box-sizing: border-box"
              class="loading"
              v-if="plLoading"
              type="spinner"
              :vertical="true"
            />
            <div class="tld_no_data" v-if="!peopLeLookData.x.length && !plLoading">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </div>
        </template>
        <noPower :minLeve="$store.state.userRoot[5][123].ownerMinLevel" v-if="showPageVip" />
      </div>

      <!-- ====================================  UV价值   =============================================== -->
      <div class="tld_live_data">
        <div class="tld_data_title">
          <div :class="{ tld_active: isUV == 1 }" class="tld_title_item" @click="isUV = 1">UV价值分布</div>
          <div :class="{ tld_active: isUV == 2 }" class="tld_title_item" @click="isUV = 2">直播商品类目分布</div>
          <div :class="{ tld_active: isUV == 3 }" class="tld_title_item" @click="isUV = 3">直播商品价格分布</div>
        </div>
        <template v-if="!showPageVip">
          <div class="tld_time_lenght" v-if="isUV == 1">
            <BarChart02
              v-if="UvValueData.x.length != 0 && !UvLoading"
              :xData="UvValueData.x"
              :series1="UvValueData.y"
              name1="UV价值分布"
              name2="单位:元"
            />
            <van-loading
              style="padding-top: 2.5rem; box-sizing: border-box"
              class="loading"
              v-if="UvLoading"
              type="spinner"
              :vertical="true"
            />
            <div class="tld_no_data" v-if="!UvValueData.x.length && !UvLoading">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </div>
          <div class="tld_time_census" v-if="isUV == 2">
            <BigPie
              v-if="goodsClassData.length != 0 && !gcLoading"
              :valueData="goodsClassData"
              Etitle="直播商品类目分布"
            />
            <van-loading
              style="padding-top: 2.5rem; box-sizing: border-box"
              class="loading"
              v-if="gcLoading"
              type="spinner"
              :vertical="true"
            />
            <div class="tld_no_data" v-if="!goodsClassData.length && !gcLoading">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </div>
          <div class="tld_time_lenght" v-if="isUV == 3">
            <BigPie
              v-if="goodsPriceData.length != 0 && !gpLoading"
              :valueData="goodsPriceData"
              Etitle="直播商品价格分布"
            />
            <van-loading
              style="padding-top: 2.5rem; box-sizing: border-box"
              class="loading"
              v-if="gpLoading"
              type="spinner"
              :vertical="true"
            />
            <div class="tld_no_data" v-if="!goodsPriceData.length && !gpLoading">
              <img src="@/assets/one/zw.png" alt />
              <div class="zw">暂无数据</div>
            </div>
          </div>
        </template>
        <noPower :minLeve="$store.state.userRoot[5][123].ownerMinLevel" v-if="showPageVip" />
      </div>

      <!-- ====================================  列表开始  ============================================= -->
      <!-- ====================================  列表开始  ============================================= -->

      <div class="tld_live_list">
        <div class="tld_title_box">
          <div class="tld_line"></div>
          <div class="tld_text">直播列表</div>
        </div>
        <div class="checkout">
          <van-checkbox
            v-model="checkGoods"
            shape="square"
            checked-color="#fd7f2c"
            icon-size=".4rem"
          >直播带货</van-checkbox>
        </div>
      </div>
      <!-- 列表上面的两个盒子 -->
      <template v-if="!showPageVip">
        <div class="tld_list_box">
          <div class="tld_list_box_item">
            <div class="tld_left">总销量(件)</div>
            <div class="tld_right">{{ listBoxData.livevolume }}</div>
          </div>
          <div class="tld_list_box_item">
            <div class="tld_left">总销售额</div>
            <div class="tld_right">{{ listBoxData.livesales }}</div>
          </div>
        </div>
        <!-- 直播列表 -->
        <div class="tld_list_wrap">
          <div
            class="list_wrap_item"
            v-for="(item, index) in pageData"
            :key="index"
            @click="toLiveDetails(item.status, item.roomId)"
          >
            <div class="list_top_box">
              <div class="list_portrait_box">
                <img :src="item.logo" v-errorImg:live />
                <!-- <div class="playingIcon"> -->
                <div class="liveAnimation" v-if="item.status == 1">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div class="list_introduce_box">
                <div class="list_introduce_top">{{ item.roomTitle }}</div>
                <div class="list_introduce_time">开播时间: {{ item.beginTime }}</div>
              </div>
            </div>

            <div class="list_btm_box">
              <div class="list_btm_box_item">
                <div class="num">{{ item.duration }}</div>
                <div class="text">直播时长</div>
              </div>
              <div class="list_btm_box_item">
                <div class="num">{{ item.isShop ? item.livevolume : "--" }}</div>
                <div class="text">直播销量</div>
              </div>
              <div class="list_btm_box_item">
                <div class="num">{{ item.isShop ? item.livesales : "--" }}</div>
                <div class="text">直播销售额</div>
              </div>
            </div>
          </div>

          <!-- 暂无列表数据 -->
          <div class="tld_list_nodata" v-if="!pageData.length && !listBottomLoading">
            <img src="@/assets/one/zw.png" alt />
            <div class="zw">暂无数据</div>
          </div>
          <van-loading class="loading" v-if="listBottomLoading" type="spinner" :vertical="true" />
          <!-- 查看更多 -->
          <div class="tld_more_box" v-show="pageData.length">
            <div
              class="tld_more_button"
              v-if="!listBottomLoading && !isLastPage"
              @click="lookMore"
            >查看更多</div>
            <div class="tld_details" v-if="isLastPage">
            我是有底线的~
            </div>
          </div>
        </div>
        <div v-if="listBottomLoading" class="blank_holder"></div>
      </template>

      <noPower :minLeve="$store.state.userRoot[5][123].ownerMinLevel" v-if="showPageVip" />
    </div>
    <div class="bott"></div>
  </div>
</template>

<script>
import RadioGroup from './EComponents/RadioGroup.vue';
import BigPie from '@/component/BigPie.vue';
import KChart from './EComponents/KChart.vue';
import BarChart02 from './EComponents/BarChart02.vue';
import BarChart01 from './EComponents/BarChart01.vue';
export default {
  components: { RadioGroup, BigPie, KChart, BarChart02, BarChart01 },
  props: ['LiveShop'],
  data() {
    return {
      lookTime: '30天',
      startDate: this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D'),
      endDate: this.timestamp((Date.now() / 1000) * 1, 'Y-M-D'),
      changeBoard: true, //日 / 周 切换
      isLive: 1, // 上面图表 tab切换
      isUV: 1, // 下面图表 tab切换
      checkGoods: false,
      isShop: 0, //是否直播带货
      LiveLookData: {}, // 直播概览数据
      liveTiemData: [], // 直播时长分布
      startLiveData: {
        // 开播时间统计
        x: [],
        y: []
      },
      peopLeLookData: {
        //人均看播时长
        x: [],
        y: []
      },
      UvValueData: {
        //UV价值分布
        x: [],
        y: []
      },
      goodsClassData: [], //直播商品类目分布
      goodsPriceData: [], //直播商品价格分布
      pageData: [], //列表数据
      pageTotal: 0, //列表总条数
      listBoxData: {}, //销量, 销售额

      listBottomLoading: false,

      llLoading: false, //直播数据概览
      ltLoading: false, // 直播时长分布
      slLoading: false, // 开播时间统计
      plLoading: false, // 人均看播时长
      UvLoading: false, // uv价值分布
      gcLoading: false, //直播商品类目分布
      gpLoading: false, //直播商品价格分布

      // 列表相关传参
      PageIndex: 1,
      PageSize: 10,
      isLastPage: false,
      showPageVip: false
    };
  },
  watch: {
    lookTime: function (newVal, oldVal) {
      this.changeTime();
    },
    checkGoods: function (newVal, oldVal) {
      this.PageIndex = 1;
      this.pageData = [];
      newVal ? (this.IsShop = 1) : (this.IsShop = 0);
      this.getPage();
    }
  },
  computed: {},
  created() {
    this.changeTime();
  },
  mounted() {},
  methods: {
    initTime(timeStr){
      if(timeStr == '--' || !timeStr){
        return '--';
      }else{
        // let nStr = timeStr.replace(/\d+|[h|m|s]/g,(a)=>{
        //   if(isNaN(a)){
        //     return `<i style="font-style:normal;font-size:.38rem;color:#999">${a}</i>`;
        //   }else{
        //     return `<span style="font-style:normal;font-size:.38rem;color:#999">${a}</span>`;
        //   }
        // })
        // return nStr;
        return timeStr.replace(/[h|m|s]/ig,(a)=>{
          return `<span style="font-style:normal;font-size:.38rem;color:#999">${a}</span>`;
        });
      }
    },
    changeTime() {
      this.PageIndex = 1;
      this.pageData = [];
      switch (this.lookTime) {
        case '近7天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;
        case '30天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');

          break;
        case '90天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
      }
      this.getLiveOverview();
      this.liveTimeLength();
      this.GetStartLive();
      this.getPeopLeLook();
      this.getUvValue();
      this.getGoodsClass();
      this.getGoodsPrice();
      this.getPage();
    },
    // 列表查看更多事件
    lookMore() {
      this.PageIndex++;
      this.getPage();
    },

    // 日 周 切换事件
    changeList(e) {
      if (this.changeBoard == e) return; //防止重复点击同一个按钮
      this.changeBoard = e;
      this.GetStartLive();
    },
    // 获取直播概览数据
    getLiveOverview() {
      this.llLoading = true;
      this.LiveLookData = {};
      this.$axios
        .post('/api/Live/GetAuthorLiveOverView', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          if (res.data.code == 0) {
            this.llLoading = false;
            this.LiveLookData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    // 直播时长分布
    liveTimeLength() {
      this.liveTiemData = [];
      this.ltLoading = true;
      this.$axios
        .post('/api/Live/LiveDurationDistribution', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.ltLoading = false;
          if (res.data.code == 0) {
            this.liveTiemData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    // 开播时间统计
    GetStartLive() {
      this.slLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsDurationStatistics', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate,
          DateType: this.changeBoard ? 'd' : 'w' //d天w周
        })
        .then(res => {
          this.slLoading = false;
          if (res.data.code == 0) {
            this.startLiveData.x = res.data.data.x;
            this.startLiveData.y = res.data.data.y;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    // 人均看播时长
    getPeopLeLook() {
      this.plLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsPerCapitaWatchDuration', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.plLoading = false;
          if (res.data.code == 0) {
            this.peopLeLookData.x = res.data.data.x;
            this.peopLeLookData.y = res.data.data.y;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    // uv价值分布
    getUvValue() {
      this.UvLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsUVValueDistribution', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.UvLoading = false;
          if (res.data.code == 0) {
            this.UvValueData.x = res.data.data.x;
            this.UvValueData.y = res.data.data.y;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    // 直播商品类目分布
    getGoodsClass() {
      this.gcLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsProCategoryDistribution', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.gcLoading = false;
          if (res.data.code == 0) {
            this.goodsClassData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },
    // 直播商品价格分布
    getGoodsPrice() {
      this.gpLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsProLivePriceDistribution', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate
        })
        .then(res => {
          this.gpLoading = false;
          if (res.data.code == 0) {
            this.goodsPriceData = res.data.data;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },

    // 列表数据
    getPage() {
      this.pageLoading = true;
      this.isLastPage = false;
      this.listBottomLoading = true;
      this.$axios
        .post('/api/Live/LiveDetailsGetPageList', {
          AuthorId: this.$route.query.id,
          Times: this.startDate + '-' + this.endDate,
          IsShop: this.IsShop, //是否直播带货 1 是  其他值 否
          PageIndex: this.PageIndex, //分页索引
          PageSize: this.PageSize, //分页大小
          SortOrder: 1, //排序 1 开始时间 2平均在线人数 3UV 4直播销量 5直播销售额
          SortValue: 0 //排序 0降序 1升序
        })
        .then(res => {
          this.pageLoading = false;
          if (res.data.code == 0) {
            this.pageData.push(...res.data.data.list);
            this.listBoxData = res.data.data.total;
            this.pageTotal = res.data.data.pageInfo.totalCount;
            this.listBottomLoading = false;
            if (this.pageTotal == this.pageData.length) {
              this.isLastPage = true;
            }
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        });
    },

    // 跳转直播大屏 和 直播详情
    toLiveDetails(status, roomid) {
      if (status == 1) {
        this.$router.push({
          path: '/liveBigScreenMain',
          query: {
            id: roomid
          }
        });
      } 
      if(status != 1) {
        this.$router.push({
          path: '/LiveForDetailsMain',
          query: {
            author_id: this.$route.query.id,
            room_id: roomid,
            
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.bott {
  width: 100%;
  height: 0.36rem;
  background-color: #f1f1f1;
}
.talent_live_details {
  padding: 0 0.4rem 0.666rem;
}
.tld_live_look {
  margin-top: 0.6rem;

  .tld_look_content {
    .tld_content_row {
      display: flex;
      justify-content: space-around;
      margin-top: 0.8rem;
      .tld_content_item {
        width: 34%;
        text-align: center;
        .num {
          // font-family: Dinpro-medium;
          font-family: Dinpro-medium;
          font-size: 0.453333rem;
          color: #222222;
        }
        .text {
          font-size: 0.32rem;
          color: #888888;
          margin-top: 0.1rem;
        }
      }
    }
  }
}
.tld_live_data {
  margin-top: 0.6rem;
  .tld_data_title {
    display: flex;
    justify-content: space-between;
    margin-top: 0.466667rem;
    .tld_title_item {
      width: 2.933333rem;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      border: solid 1px #e5e5e5;
      border-radius: 0.053333rem;
      font-size: 0.32rem;
      color: #555555;
      box-sizing: border-box;
    }
    .tld_active {
      background-color: #fd7f2c;
      color: #ffffff;
      border: none;
    }
  }
  .tld_time_lenght {
    height: 5.4667rem;
  }
  .tld_time_census {
    height: 5.4667rem;
    position: relative;
    .switch {
      position: absolute;
      top: 25px;
      right: 0;
      display: flex;
      z-index: 9;
      .switch-btn {
        width: 0.866667rem;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        font-size: 0.293333rem;
        color: #555555;
        background-color: #fff;
        border: 1px solid #efefef;
        box-sizing: border-box;
        cursor: pointer;
      }
      .switch-btn:first-child {
        border-radius: 0.16rem 0px 0px 0.16rem;
        border-right: none;
      }
      .switch-btn:last-child {
        border-radius: 0px 0.16rem 0.16rem 0px;
      }
      .native {
        background-color: #fd7f2c;
        border: 1px solid #fd7f2c;
        color: #fff;
      }
    }
  }
}
.tld_look_title {
  display: flex;
  justify-content: space-between;
  .tld_title_box {
    display: flex;
    align-items: center;
    .tld_line {
      width: 0.08rem;
      height: 0.373333rem;
      background-color: #fd7f2c;
      border-radius: 0.04rem;
    }
    .tld_text {
      font-size: 0.4rem;
      font-weight: 600;
      color: #222222;
      margin-left: 0.186667rem;
    }
  }
}

// 列表
.tld_live_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.666667rem;
  .tld_title_box {
    display: flex;
    align-items: center;
    .tld_line {
      width: 0.08rem;
      height: 0.373333rem;
      background-color: #fd7f2c;
      border-radius: 0.04rem;
    }
    .tld_text {
      font-size: 0.4rem;
      font-weight: 600;
      color: #222222;
      margin-left: 0.186667rem;
    }
  }
  .checkout {
    /deep/.van-checkbox__label {
      font-size: 0.346667rem;
      color: #555;
      margin-top: 0.046667rem;
    }
    /deep/.van-icon {
      border-radius: 0.053333rem;
    }
  }
}
.tld_list_box {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
}
.tld_list_box_item {
  flex: 1;
  height: 0.986667rem;
  line-height: 0.986667rem;
  display: flex;
  justify-content: space-between;
  margin-right: 0.266667rem;
  background-color: #f5f5f5;
  border-radius: 0.133333rem;
  padding: 0 0.4rem;
  .tld_left {
    font-size: 0.346667rem;
    color: #888888;
  }
  .tld_right {
    font-size: 0.4rem;
    color: #222222;
    // font-family: Dinpro-medium;
    font-family: Dinpro-medium;
  }
}
.tld_list_box_item:last-child {
  margin-right: 0;
}

.tld_list_wrap {
  .list_wrap_item {
    margin-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
  }
  .list_wrap_item:last-of-type {
    border-bottom: 0 !important;
  }
  .list_top_box {
    display: flex;
    .list_portrait_box {
      width: 1.333333rem;
      height: 1.333333rem;
      border-radius: 0.266667rem;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.266667rem;
        object-fit: cover;
      }
      .playingIcon {
        width: 0.4rem;
        height: 0.4rem;
        position: absolute;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 0.053333rem;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .list_introduce_box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 0.266667rem;
      .list_introduce_top {
        width: 6.933333rem;
        font-size: 0.4rem;
        color: #222222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .list_introduce_time {
        font-size: 0.32rem;
        color: #888888;
        margin-top: 0.08rem;
      }
    }
  }
  .list_btm_box {
    display: flex;
    justify-content: space-around;
    margin-top: 0.36rem;
    .num {
      text-align: center;
      font-size: 0.4rem;
      color: #222222;
      // font-family: Dinpro-medium;
      font-family: Dinpro-medium;
    }
    .text {
      text-align: center;
      font-size: 0.32rem;
      color: #888888;
    }
  }
}
.tld_more_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tld_more_button {
    width: 2.133333rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.133333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.346667rem;
    color: #fd7f2c;
    margin-top: 0.666667rem;
  }
  .tld_details {
    font-size: 0.32rem;
    color: #b5b5b5;
    margin-top: 0.4rem;
  }
}
.tld_no_data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
.tld_list_nodata {
  width: 100%;
  height: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 4rem;
    height: 2.8rem;
  }
  .zw {
    font-size: 0.346667rem;
    color: #888888;
  }
}
</style>
